<template>
	<div class="OrderComment">

		<!--房源链接-->
		<div class="OrderComment-hosue o-line">
			<img class="oh-house-img" :src="houseImgUrl" />
			<div class="oh-house-con">
				<div class="oh-house-title">{{title}}</div>
				<div class="oh-housec-text">

					<div class="ohht-type" v-if="houseRent==1">出租类型：民宿套房 </div>
					<div class="ohht-type" v-if="roomRent==1">出租类型：人民单间 </div>
					<div class="ohht-type" v-if="bedRental==1">出租类型：青年床位 </div>
					<!--<div class="ohht-price">￥{{houseinfo.prices}}</div>-->
				</div>
			</div>
		</div>
		<!--房源评分-->
		<div class="OrderComment-houseComment o-line">
			<div class="oh-commentitem">
				<div class="ohct-left">描述相符</div>
				<div class="ohct-right">
					<yd-rate size=".3rem" color="#c8c8c8" active-color="#ffb400" v-model="descScore"></yd-rate>{{descScore}}分</div>
			</div>
			<div class="oh-commentitem">
				<div class="ohct-left">整洁卫生</div>
				<div class="ohct-right">
					<yd-rate size=".3rem" color="#c8c8c8" active-color="#ffb400" v-model="cleanScore"></yd-rate>{{cleanScore}}分</div>
			</div>
			<div class="oh-commentitem">
				<div class="ohct-left">交通位置</div>
				<div class="ohct-right">
					<yd-rate size=".3rem" color="#c8c8c8" active-color="#ffb400" v-model="trafficScore"></yd-rate>{{trafficScore}}分</div>
			</div>
			<div class="oh-commentitem">
				<div class="ohct-left">房东服务</div>
				<div class="ohct-right">
					<yd-rate size=".3rem" color="#c8c8c8" active-color="#ffb400" v-model="serviceScore"></yd-rate>{{serviceScore}}分</div>
			</div>
			<div class="oh-commentitem">
				<div class="ohct-left">性价比</div>
				<div class="ohct-right">
					<yd-rate size=".3rem" color="#c8c8c8" active-color="#ffb400" v-model="costScore"></yd-rate>{{costScore}}分</div>
			</div>
		</div>

		<!--房源评论-->
		<div class="OrderComment-content o-line">
			<textarea v-model="evaluateConten" class="OrderComment-content-textarea" placeholder="请输入评论内容，最少5个字,20字以上或者上传图片可额外获取积分"></textarea>
		</div>

		<!--评论图片-->
		<div class="OrderComment-imgbox">
			<div class="oibox-box" v-for="item,key in img" :key="key">
				<img class="OrderComment-img" :src="item.evtimg" />
				<span @click="OiboxColse(key)" class="oibox-colse"></span>
			</div>
			<div class="oibox-box">
				<img class="OrderComment-img" src="../assets/img/images/camera-icon_03.jpg" />
				<input @change="update" name="file" accept="image/jpeg" multiple class="oibox-file" type="file" />
			</div>
		</div>
		<div class="oibox-submitbtnbox"><button @click="EvalUateNew" class="oibox-submitbtn">发表评论</button></div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "OrderComment",
		data() {
			return {
				getHiss: JSON.parse(sessionStorage.getItem("userinfo")),
				houseId: this.$route.query.houseId,
				title: this.$route.query.title,
				houseRent: this.$route.query.houseRent,
				roomRent: this.$route.query.roomRent,
				bedRental: this.$route.query.bedRental,
				houseImgUrl: this.$route.query.houseImgUrl,
				descScore: 0,
				cleanScore: 0,
				trafficScore: 0,
				serviceScore: 0,
				costScore: 0,
				evaluateConten: '',
				qiniuimglist: [],
				img: [],
				evtid: 1

			}
		},
		mounted() {

			this.getUploadToken();
			this.ocgetShortInfo();
		},
		computed: {
			...mapGetters([
				'source',
				'qiniuToken',
				'houseinfo'
			])
		},
		methods: {
			...mapActions({
				getUploadToken: "getUploadToken",
				getShortInfo: 'getShortInfo'
			}),
			ocgetShortInfo() {
				let ajaxSign = {
					source: this.source, // string 是
					houseId: this.houseId, // string 是
					token: this.getHiss.token, // string 是(如果登录)
					userId: this.getHiss.id.toString(), // string 是(如果登录)
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetShortInfo(ajaxData)
					.then(res => {
						console.log(res)
						this.getShortInfo(res.result)
					})
			},
			EvalUateNew() {
				if(this.descScore == 0 || this.cleanScore == 0 || this.trafficScore == 0 || this.serviceScore == 0 || this.costScore == 0) {
					this.$dialog.toast({
						mes: "请对房源进行评分",
						timeout: 1000
					});
					return
				};
				if(this.evaluateConten.length < 5) {
					this.$dialog.toast({
						mes: "评价内容至少输入5个字",
						timeout: 1000
					});
					return
				}
				let ajaxSign = {
					source: this.source, // string 是 请求源 ios
					token: this.getHiss.token, // string 是 登录验证
					orderId: this.$route.query.orderId, // string 是 订单id 1000
					descScore: this.descScore, // string 是 描述符合 5.0
					cleanScore: this.cleanScore, // string 是 整洁卫生 5.0
					trafficScore: this.trafficScore, // string 是 交通便利 4.5
					serviceScore: this.serviceScore, // string 是 房东服务 5.0
					costScore: this.costScore, // string 是 性价比 4.5
					evaluateConten: this.evaluateConten, // string 是 评价内容 内容
					img: this.qiniuimglist.join(","), // string 否 图片key串
				};
				let ajaxData = api.getAES(ajaxSign);
				api.EvalUateNew(ajaxData)
					.then(res => {
						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
						
							
						if(res.sta == 200) {
							this.$router.push({
								path:"/OrderComSuccess",
							})
						}
					})
			},
			OiboxColse(mkey) {
				this.img.splice(mkey, 1)
				this.qiniuimglist.splice(mkey, 1)
			},
			update(e) {
				let file = e.target.files[0];
				let d = new Date();
				let type = file.name.split('.');
				let param = new FormData(); //创建form对象
				param.append('chunk', '0'); //断点传输
				param.append('chunks', '1');
				param.append('file', file, file.name)
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				};
				param.append('token', this.qiniuToken);
				this.uploading(param, config, file.name); //然后将参数上传七牛
				this.fileImage(e);
			},
			uploading(param, config, pathName) {
				this.$http.post('http://upload-z2.qiniup.com/', param, config)
					.then(response => {
						//						console.log(response.data);
						this.qiniuimglist = this.qiniuimglist.concat(response.data.hash);
						console.log(this.qiniuimglist)
					})
			},
			fileImage(e) {
				let fliename = e.target.id;

				var that = this;
				var file = e.target.files[0];
				var reader = new FileReader(); 
				reader.readAsDataURL(file);   
				reader.onload = function(evt) { 
					let evtimg = {
						"evtid": that.evtid,
						"evtimg": evt.target.result,
					}
					that.evtid++;
					that.img = that.img.concat(evtimg)
					console.log(that.img)

				} 
			}
		}
	}
</script>

<style>
	.OrderComment {
		width: 100%;
		color: #282828;
	}
	
	.o-line {
		border-bottom: .35rem solid #EEECEC;
	}
	
	.OrderComment-hosue {
		width: 100%;
		display: flex;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.oh-house-img {
		display: block;
		width: 3.13rem;
		height: 2.1rem;
		margin-right: .46rem;
	}
	
	.oh-house-con {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.oh-house-title {
		width: 3.4rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: .28rem;
		margin-top: .1rem;
	}
	
	.oh-housec-text {
		width: 3.4rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		font-size: .24rem;
		padding: 0 0 .3rem 0;
		box-sizing: border-box;
	}
	
	.ohht-price {
		color: #E25051;
		font-size: .31rem;
	}
	/*房源评分*/
	
	.OrderComment-houseComment {
		width: 100%;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.oh-commentitem {
		display: flex;
		font-size: .3rem;
		padding: .15rem 0;
		box-sizing: border-box;
	}
	
	.ohct-left {
		margin-right: .42rem;
		width: 1.2rem;
	}
	
	.ohct-right {
		display: flex;
	}
	/*房源评价*/
	
	.OrderComment-content {
		width: 100%;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.OrderComment-content-textarea {
		border: 0;
		width: 100%;
		height: 2.22rem;
		font-size: .3rem;
	}
	
	::-webkit-input-placeholder {
		font-size: .3rem;
		color: #7e7c7c;
	}
	/*评论图片*/
	
	.OrderComment-imgbox {
		display: flex;
		-webkit-flex-wrap: wrap;
		padding: .24rem;
	}
	
	.oibox-box {
		width: 2.1rem;
		height: 1.4rem;
		position: relative;
		margin-bottom: .24rem;
		margin-right: .24rem;
	}
	
	.oibox-colse {
		width: .27rem;
		height: .27rem;
		position: absolute;
		top: .05rem;
		right: .05rem;
		background: url(../assets/img/images/oibox-colse_27.png) no-repeat center;
		background-size: .27rem;
	}
	
	.oibox-file {
		width: 2.1rem;
		height: 1.4rem;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		opacity: 0;
	}
	
	.OrderComment-img {
		display: block;
		width: 2.1rem;
		height: 1.4rem;
	}
	
	.oibox-submitbtnbox {
		width: 100%;
		font-size: .35rem;
		line-height: 1.01rem;
		text-align: center;
		padding-bottom: .5rem;
		box-sizing: border-box;
	}
	
	.oibox-submitbtn {
		border: none;
		border-radius: .1rem;
		width: 5.6rem;
		height: .9rem;
		background: #E25051;
		color: #fff;
		text-align: center;
		font-size: .34rem;
	}
</style>